<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>reveal.js</title>

		<link rel="stylesheet" href="css/reveal.css">
		<link rel="stylesheet" href="css/theme/black.css">

		<!-- Theme used for syntax highlighting of code -->
		<link rel="stylesheet" href="lib/css/zenburn.css">

		<!-- Printing and PDF exports -->
		<script>
			var link = document.createElement( 'link' );
			link.rel = 'stylesheet';
			link.type = 'text/css';
			link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
			document.getElementsByTagName( 'head' )[0].appendChild( link );
		</script>
	</head>
	<body>
		<div class="reveal">
			<div class="slides">
				<section data-markdown>
					<textarea data-template>
						# JS
					</textarea>
				</section>

				<section data-markdown>
					<textarea data-template>
						### 常用网站

						* [google](https://www.google.com/)
						* [stackoverflow](https://stackoverflow.com/)
						* [github](https://github.com/)
						* [MDN](https://developer.mozilla.org/en-US/)
						* [CSS-Tricks](https://css-tricks.com/)
					</textarea>
				</section>

				<section>
					<section data-markdown>
						<textarea data-template>
							### 类型
						</textarea>
					</section>
				</section>
				<section>
					<section data-markdown>
						<script type="text/template">
							###### 基本类型
						</script>
					</section>
					<section data-markdown>
						<script type="text/template">
							- Undefined <!-- .element: class="fragment" data-fragment-index="1" -->
							- Null <!-- .element: class="fragment" data-fragment-index="2" -->
							- Boolean<!-- .element: class="fragment" data-fragment-index="3" -->
							- Number<!-- .element: class="fragment" data-fragment-index="4" -->
							- String<!-- .element: class="fragment" data-fragment-index="5" -->
							- Symbol<!-- .element: class="fragment" data-fragment-index="6" -->
						</script>
					</section>
				</section>
				<section>
					<section data-markdown>
						<script type="text/template">
							**Object**
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							基于原型的面向对象
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							Object是一组***property***的集合，每个property有一组***attribute***决定property怎么使用
							* data property
							* accessor property
						</script>
					</section>

					<section>
						<em>Data Property</em>
						<table>
							<thead>
								<tr>
									<td>Attribute Name</td>
									<td>Value Type</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>[[Value]]</td>
									<td>Any Type</td>
								</tr>
								<tr>
									<td>[[Writable]]</td>
									<td>Boolean</td>
								</tr>
								<tr>
									<td>[[Enumerable]]</td>
									<td>Boolean</td>
								</tr>
								<tr>
									<td>[[Configurable]]</td>
									<td>Boolean</td>
								</tr>
							</tbody>
						</table>
					</section>

					<section data-markdown>
						<script type="text/template">
```js
const foo = {
	bar: 12
}

Object.getOwnPropertyDescriptor(foo, 'bar')
```
						</script>
					</section>

					<section>
						<em>Accessor Property</em>
						<table>
							<thead>
								<tr>
									<td>Attribute Name</td>
									<td>Value Type</td>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>[[Get]]</td>
									<td>Function Object</td>
								</tr>
								<tr>
									<td>[[Set]]</td>
									<td>Function Object</td>
								</tr>
								<tr>
									<td>[[Enumerable]]</td>
									<td>Boolean</td>
								</tr>
								<tr>
									<td>[[Configurable]]</td>
									<td>Boolean</td>
								</tr>
							</tbody>
						</table>
					</section>

					<section data-markdown>
						<script type="text/template">
```js
const foo = {
	get bar() {
		return this._bar
	},
	set bar(val) {
		this._bar = val
	}
}

Object.getOwnPropertyDescriptor(foo, 'bar')
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***[[Prototype]]*** <!-- .element: style="color: red;" -->
						</script>
					</section>

		
					<section data-markdown>
						<textarea data-template>
							***get***
```js
var root = {
    name: 'root'
}

var parent = Object.create(root, {})
console.log(parent.__proto__ === root)
console.log(parent.name)

var child = Object.create(parent, {})
console.log(child.__proto__ === parent)
console.log(child.name)

console.log(root.__proto__, root__proto__.__proto__)

```
						</textarea>
					</section>

					<section data-markdown>
						<textarea data-template>
							***set***
```js
var root = {
	name: 'root'
}

var child = Object.create(root, {})
child1.name = 'child'

console.log(root.name)
```
						</textarea>
					</section>					
					
				</section>

				<section>

					<section data-markdown>
						<textarea data-template>
							***=== Vs. ==***

						</textarea>
					</section>

					<section data-markdown>
						<textarea data-template>
							***===***

						</textarea>
					</section>					

					<section data-markdown>
						<textarea data-template>
							`x === y`
							1. 如果x和y类型不同，返回false
							2. 如果x和y都是Number， 
								1. x，或者y是NaN，返回false
								2. 如果x和y相等，返回true
								3. 返回false
							3. ...

						</textarea>
					</section>

					<section data-markdown>
						<textarea data-template>
							***==***

						</textarea>
					</section>					

					<section data-markdown>
						<textarea data-template>
							隐式类型转换
```js
// to bool
console.log(!!null, !!undefined)
console.log(!!0, !!NaN, !!Infinity, !!3)
console.log(!!'', !!' ')
console.log(!!{})


// to number
console.log(true - 0, false - 0)
console.log(null - 0, undefined - 0)
```
							
						</textarea>
					</section>
	
					<section data-markdown>
						<textarea data-template>
							`x == y`
							1. 如果x和y类型xiang'相同，返回`x === y`
							2. undefined和null，返回true
							3. 其他类型，自动类型转换...

						</textarea>
					</section>
					
				</section>

				<section>

					<section data-markdown>
						<script type="text/template">
							**Function**

							function也是对象
						</script>
					</section>
					<section data-markdown>
						<script type="text/template">
								function declaration
```js
function foo() {

}
```
								function expression
```js
var bar = function () {

}
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
```js
function foo(a, b) {
	console.log(arguments.length)
}

console.log(foo.length)

foo(1, 2)

foo.apply(null, [1, 2, 3])
foo.call(null, 1, 2, 3, 4)
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***constructor***
						</script>
					</section>
						
					<section data-markdown>
						<script type="text/template">
							***func.prototype***
```js
function Foo() {

}

var foo = new Foo()
var foo2 = new Foo()

console.log(foo.__proto__ === Foo.prototype)
console.log(foo.__proto__ === foo2.__proto__)
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
						***func.prototype***
```js
function User(name, age) {
	this.name = name
	this.age = age
}

User.prototype.greeting = function() {
	console.log(`hello ${this.name}`)
}

var user = new User('John Sawyer')
user.greeting()
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***this***
							* this的值在函数运行的时候确定
							* this的值在函数运行的时候不能修改
						</script>
					</section>
					
					<section data-markdown>
						<script type="text/template">
							***this***
```js
function bar() {
	return this
}

console.log(window === bar()) // 'use strict'模式下this是undefined

var foo = {
	bar
} 

console.log(foo === foo.bar())
```
						</script>
					</section>
					

					<section data-markdown>
						<script type="text/template">
							***this***
```js
function bar() {
	return this
}
var foo = {}
console.log(bar.apply(foo) === foo)
console.log(bar.apply(null) === window)

var newBar = bar.bind(foo)
console.log(newBar() === foo)
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***this***
```js
function User(name) {
	this.name = name
}
var user = new User('John Sawyer')

// 相当于:
var user = Object.create(User.prototype, {})
var ret = User.call(user, 'John Sawyer')
if (ret) {
	user = ret
}
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							为什么***this***的值和想象的不一样？
```js
var user = {
	name: 'John Sawyer',
	hello: function() {
		console.log(`hello ${this.name}`)
	}
}

setTimeout(user.hello, 100)

```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***[[scope]]*** <!-- .element: style="color: red;" -->
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
```js
function add(n) {
	return function(another) {
		return n + another
	}
}

var add5 = add(5)

console.log(add5(5))

```
						</script>
					</section>

				</section>

				<section>
					<section data-markdown>
						<script type="text/template">
							### ES6
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***const, let, var***
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							arrow function
```js
var convert = x => 2x

var add = (x, y) => x + y

// arrow function 没有this和arguments
var power5 = ()=> {
	var x = 5
	return x * x
}
```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***map / filter / reduce***
```js
[1, 2, 3].map(val => 2 * val)

[1, 2, 3, 4, 5].filter(val => val % 2 === 1).map(val => 2 * val)

// pval是前面一次调用的返回值
[1, 2, 3].reduce((pval, val) => pval += val, 0)

```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***template literals***
```js
var x = 10, y = 20

console.log(`${x} + ${y} = ${x + y}`)

```
						</script>
					</section>

					<section data-markdown>
						<script type="text/template">
							***spread syntax***
```js
function sum(...nums) {
	return nums.reduce((pval, val) => pval += val, 0)
}
console.log(sum(1, 2, 3))
console.log(sum(...[1, 2, 3]))

var foo = {x: 10, y:20}
var shadow = {z: 20, ...foo}
console.log(shadow)
```
						</script>
					</section>			

					<section data-markdown>
						<script type="text/template">
							***destructuring***
```js
var a = 10, b = 20
[a, b] = [b, a]

var user = {
	name: 'John Sawyer',
	age: 55
}
function hello({name, age}) {
	console.log(`Hello, I'm ${name}, I'm ${age} years old.`)
}
hello(user)
```
						</script>
					</section>						
					
					<section data-markdown>
						<script type="text/template">
							怎么使用es6？
	
							babel
	
						</script>
					</section>	

				</section>

				<section>

					<section data-markdown>
						<script type="text/template">
							### 异步调用
						</script>
					</section>
					
					
					<section data-markdown>
						<script type="text/template">
							JS是单线程
						</script>
					</section>
					
					<section data-markdown>
						<script type="text/template">
```js

request.get('http://www.zhihu.com', (err, body, response) => {
	if (err) {
		console.log(err)
		return
	}

	process(body)
})

```
						</script>
					</section>
				
					<section data-markdown>
						<script type="text/template">
							处理流程：
							1. step1
							2. step2
							3. step3
							4. step4
						</script>
					</section>
				
					<section data-markdown>
						<script type="text/template">
							***callback***
```js
step1(data => {
	step2(data => {
		step3(data => {
			step4(data => {

			})
		})
	})
})
```
						</script>
					</section>
				
					<section data-markdown>
						<script type="text/template">
							***promise***
```js
step1().then(data => {
	return step2()
}).then(data => {
	return step3()
}).then(data => {
	return step4()
}).then(data => {

}).catch(err => {

})
```
						</script>
					</section>

					<section data-markdown>
							<script type="text/template">
								***Promise***
	
```js

var promise = new Promise((resolve, reject) => {
	request.get('http://www.zhihu.com', (err, body, response) => {
		if (err) {
			reject(err)
			return
		}
	
		resolve(body)
	})
})

```
	
							</script>
						</section>		

					
					<section data-markdown>
						<script type="text/template">
							***Promise***

							* ***Promise.prototype.then()***
							* ***Promise.prototype.catch()***
							* ***Promise.prototype.finally()***

						</script>
					</section>				
					
					<section data-markdown>
						<script type="text/template">
							***Promise***

							* ***Promise.all()***
							* ***Promise.race()***
							* ***Promise.resolve()***
							* ***Promise.reject()***

						</script>
					</section>
					
	
					<section data-markdown>
						<script type="text/template">
							***async/await***
```js
(async () => {
	try {
		let data = await step1() 
		data = await step2()
		data = await step3()
		data = await step4()
	} catch (err) {

	}
})()
```
						</script>
					</section>
							
	
								

				</section>

			</div>
		</div>

		<script src="lib/js/head.min.js"></script>
		<script src="js/reveal.js"></script>

		<script>
			// More info about config & dependencies:
			// - https://github.com/hakimel/reveal.js#configuration
			// - https://github.com/hakimel/reveal.js#dependencies
			Reveal.initialize({
				dependencies: [
					{ src: 'plugin/markdown/marked.js' },
					{ src: 'plugin/markdown/markdown.js' },
					{ src: 'plugin/notes/notes.js', async: true },
					{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
				]
			});
		</script>
	</body>
</html>
